<template>
  <div>
    <el-row :gutter="20">
      <el-col :lg="8" :xl="8" style="margin-bottom: 17px">
        <div class="padding10 tree" :style="{ height: leftTreeHeight + 'px' }">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="leftTreeFilterText"
              clearable
              style="margin-bottom: 10px"
          ></el-input>
          <el-tree
              class="filter-tree"
              :data="leftTreeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="leftTreeFilterNode"
              highlight-current
              ref="tree"
              @node-click="chooseLeftTree"
          ></el-tree>
        </div>
      </el-col>
      <el-col :lg="16" :xl="16">
        <div class="padding10">
          <el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
            <el-form-item>
              <el-input
                  prefix-icon="el-icon-search"
                  v-model="queryForm.username"
                  autocomplete="off"
                  placeholder="姓名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <fortress-select
                  v-model="queryForm.type"
                  :dictList="AttendanceRecordTypeEnum_oaList"
                  placeholder="请选择考勤类型"
                  clearable
                  filterable
              ></fortress-select>
            </el-form-item>
            <el-form-item v-show="collapse.flag">
              <fortress-select
                  v-model="queryForm.status"
                  :dictList="AttendanceRecordStatus_oaList"
                  placeholder="请选择状态"
                  clearable
                  filterable
              ></fortress-select>
            </el-form-item>
            <el-form-item label-width="200px" v-show="collapse.flag">
              <el-date-picker style="width: 100%"
                              v-model="timeScope"
                              type="daterange"
                              value-format="yyyy-MM-dd"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({current:1})">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="handleCollapseState"
              >{{ collapse.label }}<i :class="collapse.icon"></i
              ></el-button>
            </el-form-item>
          </el-form>
          <el-button
              style="margin: 10px 0 17px"
              type="primary"
              size="medium"
              icon="el-icon-plus"
              v-if="$tools.hasPermission('oa:attendanceRecord:save')"
              @click="handleEdit()"
          >添加
          </el-button
          >
          <el-button
              v-if="$tools.hasPermission('oa:attendanceRecord:deleteBatch')"
              size="medium"
              type="danger"
              icon="el-icon-delete"
              @click="handleDeleteBatch()"
          >删除
          </el-button
          >
          <div style="float: right; padding-right: 17px">
            <i
                class="el-icon-download"
                style="margin-right: 10px; cursor: pointer"
                @click="handleExport"
            ></i>
            <i
                class="el-icon-refresh"
                style="margin-right: 10px; cursor: pointer"
                @click="refresh"
            ></i>

            <el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
              <el-checkbox-group v-model="tableShowList">
                <el-checkbox
                    v-for="item in tableList"
                    :label="item.propName"
                    :key="item.propName"
                    :value="item.propName"
                >{{ item.propDesc }}
                </el-checkbox
                >
              </el-checkbox-group>
              <i
                  slot="reference"
                  class="el-icon-s-operation"
                  style="cursor: pointer"
              ></i>
            </el-popover>
          </div>
          <!-- loading -->
          <loading :show="parentShow">
            <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
            >
              <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
              <el-table-column
                  v-if="$tools.isShow('userId', tableShowList)"
                  prop="username"
                  label="员工ID"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('deptId', tableShowList)"
                  prop="deptIdName"
                  label="所属部门"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('date', tableShowList)"
                  prop="date"
                  label="考勤日期"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('clockIn', tableShowList)"
                  prop="clockIn"
                  label="打卡时间"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('type', tableShowList)"
                  prop="type"
                  label="考勤类型"
                  :show-overflow-tooltip="true"
                  :formatter="typeFmt"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('gmtTime', tableShowList)"
                  prop="gmtTime"
                  label="标准时间（规则的时间）"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('attendanceTime', tableShowList)"
                  prop="attendanceTime"
                  label="考勤时间 冗余字段 统计时间用"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('address', tableShowList)"
                  prop="address"
                  label="打卡详细地址"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('range', tableShowList)"
                  prop="range"
                  label="打卡经纬度"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('status', tableShowList)"
                  prop="status"
                  label="状态"
                  :show-overflow-tooltip="true"
                  :formatter="statusFmt"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('isDeleted', tableShowList)"
                  prop="isDeleted"
                  label="是否删除"
                  :show-overflow-tooltip="true"
                  :formatter="isDeletedFmt"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('createUser', tableShowList)"
                  prop="createUserName"
                  label="创建人"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                  v-if="$tools.isShow('createTime', tableShowList)"
                  prop="createTime"
                  label="创建时间"
                  :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" fixed="right" min-width="180">
                <template slot-scope="scope">
                  <el-button
                      v-if="$tools.hasPermission('oa:attendanceRecord:info')"
                      size="mini"
                      plain
                      @click="handleInfo(scope.row.id)"
                  >详情
                  </el-button
                  >
                  <el-button
                      v-if="$tools.hasPermission('oa:attendanceRecord:edit')"
                      size="mini"
                      plain
                      @click="handleEdit(scope.row)"
                  >编辑
                  </el-button
                  >
                  <el-button
                      v-if="$tools.hasPermission('oa:attendanceRecord:delete')"
                      size="mini"
                      plain
                      type="danger"
                      @click="handleDelete(scope.row)"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </loading>
          <pagination :total="page.total" :current-page="page.current" :page-size="page.size"
                      @refreshData="queryList"></pagination>
          <!-- 新增、编辑 -->
          <form-edit
              v-if="formEditVisible"
              ref="formEdit"
              :leftTreeData="leftTreesimple"
              @refreshData="queryList"
          ></form-edit>
          <!-- 详情 -->
          <form-info v-if="formInfoVisible" ref="formInfo"></form-info>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  attendancerecordPage,
  attendancerecordDel,
  attendancerecordDelBatch,
  attendancerecordDynamicExport,
  leftTreeList,
} from "@/api/oa/attendancerecord.js";
import {viewTableList} from "@/api/public.api.js";
import FormEdit from "./attendancerecord-edit";
import FormInfo from "./attendancerecord-info";
import FortressPagination from "@/components/fortress-pagination.vue";
import {enumList, urlList,} from "@/api/public.api.js";

export default {
  data() {
    return {
      timeScope: [],
      leftTreeHeight: 0,
      leftTreeFilterText: "",
      parentShow: false,
      tableData: [],
      leftTreeData: [],
      leftTreesimple: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      sleLeftTreeId: "",
      sleLeftTreeName: "",
      formEditVisible: false,
      formInfoVisible: false,
      queryForm: {
        userId: "",
        type: "",
        status: "",
        username: ""
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      collapse: {
        icon: "el-icon-arrow-down el-icon--right",
        label: "展开",
        flag: false,
      },
      tableList: [],
      tableShowList: [],
      AttendanceRecordTypeEnum_oaList: [],
      AttendanceRecordStatus_oaList: [],
      YesNoList: [],
      settIdList: [],
    };
  },
  components: {
    "form-edit": FormEdit,
    "form-info": FormInfo,
    pagination: FortressPagination,
  },
  created() {
    this.leftTreeHeight = window.innerHeight * 0.8;
    this.queryEnumList();
    this.queryUrlList();
    this.queryLeftTreeList();
    this.initTableList();
    this.queryList();
  },
  watch: {
    leftTreeFilterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    queryEnumList() {
      this.AttendanceRecordTypeEnum_oaList = [];
      enumList("AttendanceRecordType", "oa").then((resp) => {
        if (resp.code == 0) {
          this.AttendanceRecordTypeEnum_oaList = resp.data;
        }
      });
      this.AttendanceRecordStatus_oaList = [];
      enumList("AttendanceRecordStatus", "oa").then((resp) => {
        if (resp.code == 0) {
          this.AttendanceRecordStatus_oaList = resp.data;
        }
      });
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
    },
    queryUrlList() {
      this.settIdList = [];
      urlList("/oa/attendanceSetting/list").then((resp) => {
        if (resp.code == 0) {
          if (resp.data) {
            resp.data.forEach((item) => {
              this.settIdList.push({code: item.id, name: item.name});
            });
          }
        }
      });
    },
    //查询左树数据
    queryLeftTreeList() {
      this.leftTreeData = [{id: -1, name: "全部"}];
      leftTreeList().then((resp) => {
        if (resp.code == 0) {
          this.leftTreesimple = resp.data;
          this.leftTreeData = this.leftTreeData.concat(this.leftTreesimple);
        } else {
          this.$msg({
            message: resp.msg,
            type: "error",
          });
        }
      });
    },
    leftTreeFilterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点选左侧树
    chooseLeftTree(data) {
      if (data.id == -1) {
        this.sleLeftTreeId = "";
        this.sleLeftTreeName = "";
        this.queryRightTable("");
      } else {
        this.sleLeftTreeId = data.id;
        this.sleLeftTreeName = data.name;
        this.queryRightTable(data.id);
      }
    },
    //点击左树筛选右侧表格数据
    queryRightTable(sleLeftTreeId) {
      this.queryForm.deptId = sleLeftTreeId;
      this.queryList();
    },
    refresh() {
      this.tableData = [];
      this.queryList({current: 1});
    },
    //查询表格数据
    queryList(page) {
      this.parentShow = true;
      if (page) {
        this.page.current = page.current ? page.current : this.page.current;
        this.page.size = page.size ? page.size : this.page.size;
      }
      this.queryForm.current = this.page.current;
      this.queryForm.size = this.page.size;
      if (this.timeScope.length > 0) {
        this.queryForm.limitStartTime = this.timeScope[0] + " 00:00:00"
        this.queryForm.limitEndTime = this.timeScope[1] + " 23:59:59"
      }
      attendancerecordPage(this.queryForm).then((resp) => {
        if (resp.code == 0) {
          this.tableData = resp.data.records;
          this.page.total = resp.data.total;
          //查询页大于总页数，重新查询
          let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt((this.page.total / this.page.size) + 1);
          if (cu > 0 && this.page.current > cu) {
            this.queryList({current: cu});
          }
        } else {
          this.$msg({
            message: resp.msg,
            type: "error",
          });
        }
        this.parentShow = false;
      });
    },
    //打开编辑窗口
    handleEdit(row) {
      //新增
      if (!row) {
        if (!this.sleLeftTreeId) {
          this.$msg({
            message: "请选择左侧架构",
            type: "error",
          });
          return;
        }
      }
      this.formEditVisible = true;
      this.$nextTick(() => {
        if (row) {
          this.$refs.formEdit.init(row.id);
        } else {
          this.$refs.formEdit.init(undefined, this.sleLeftTreeId, this.sleLeftTreeName);
        }

      });
    },
    //打开详情窗口
    handleInfo(id) {
      this.formInfoVisible = true;
      this.$nextTick(() => {
        this.$refs.formInfo.init(id);
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm('确认删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        attendancerecordDel(row.id).then((resp) => {
          if (resp.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            //判断是否最后一页的最后一条记录
            let totalPages =
                (this.page.total - 1) % this.page.size == 0
                    ? (this.page.total - 1) / this.page.size
                    : (this.page.total - 1) / this.page.size + 1;
            if (this.page.current > totalPages && this.page.current != 1) {
              this.page.current = this.page.current - 1;
            }
            this.queryList();
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }).catch(() => {
      });
    },
    //批量删除
    handleDeleteBatch() {
      let checkedRow = this.$refs.multipleTable.selection;
      if (checkedRow.length > 0) {
        let ids = [];
        checkedRow.forEach((item) => {
          ids.push(item.id);
        });
        this.$confirm("确认删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
            .then(() => {
              attendancerecordDelBatch(ids).then((resp) => {
                if (resp.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  //判断是否最后一页的最后一条记录
                  let totalPages =
                      (this.page.total - checkedRow.length) % this.page.size == 0
                          ? (this.page.total - checkedRow.length) / this.page.size
                          : (this.page.total - checkedRow.length) / this.page.size +
                          1;
                  if (this.page.current > totalPages && this.page.current != 1) {
                    this.page.current = this.page.current - 1;
                  }
                  this.queryList();
                } else {
                  this.$msg({
                    message: resp.msg,
                    type: "error",
                  });
                }
              });
            })
            .catch(() => {
            });
      } else {
        this.$msg({
          message: "请选择数据进行删除",
          type: "error",
        });
      }
    },
    //重置查询框
    resetQueryForm() {
      this.queryForm = {
        username: "",
        userId: "",
        type: "",
        status: "",
        deptId: this.sleLeftTreeId,
      };
      this.timeScope = []
    },
    //切换查询条件收缩框
    handleCollapseState() {
      this.collapse.flag = !this.collapse.flag;
      if (this.collapse.flag) {
        this.collapse.icon = "el-icon-arrow-up el-icon--right";
        this.collapse.label = "收起";
      } else {
        this.collapse.icon = "el-icon-arrow-down el-icon--right";
        this.collapse.label = "展开";
      }
    },
    //视图表格列表初始化
    initTableList() {
      viewTableList("oa_attendance_record").then((resp) => {
        if (resp.code == 0) {
          this.tableList = resp.data;
          this.tableList.forEach((item) => {
            this.tableShowList.push(item.propName);
          });
        }
      });
    },
    //考勤类型格式化返回
    typeFmt(row) {
      let name = "";
      if (this.AttendanceRecordTypeEnum_oaList) {
        this.AttendanceRecordTypeEnum_oaList.forEach(item => {
          if (item.code == row.type) {
            name = item.name;
          }
        })
      }
      return name;
    },
    //状态格式化返回
    statusFmt(row) {
      let name = "";
      if (this.AttendanceRecordStatus_oaList) {
        this.AttendanceRecordStatus_oaList.forEach(item => {
          if (item.code == row.status) {
            name = item.name;
          }
        })
      }
      return name;
    },
    isDeletedFmt(row) {
      let name = "禁用";
      if (row.isDeleted == 1) {
        name = "启用";
      }
      return name;
    },
    //可见字段excel导出
    handleExport() {
      if (!this.tableShowList || this.tableShowList.length < 1) {
        this.$msg({
          message: "请选择要导出的列",
          type: "error",
        });
        return;
      }
      let colNum = 1;
      let headerList = [];
      this.tableShowList.forEach((item) => {
        let nameData = this.tableList.find((item2) => {
          return item2.propName == item;
        });
        let name = "";
        if (nameData && nameData.propDesc) {
          name = nameData.propDesc;
        } else {
          name = "未定义字段" + colNum++;
        }
        headerList.push({name: name, code: item});
      });
      attendancerecordDynamicExport({headerList: headerList, dto: this.queryForm});
    },
  },
};
</script>
<style scoped>
.padding10 {
  padding: 10px 20px;
  background-color: #fff;
  /* max-height: 600px; */
  overflow: auto;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}

.tree {
  height: 600px;
  overflow: auto;
}
</style>
